<template>
	<view>
		<uni-nav-bar fixed="true" statusBar leftWidth="0" rightWidth="150rpx" class="navBar" border="false">
			<view class="input-view">
				<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
				<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词"
					v-model="searchParams.gname" @confirm="search" />
			</view>
			<block slot="right">
				<view class="icons" @click="search">
					<!-- <uni-icons type="address" size="20" class="icon" color="#000"
						@click="$commonFunc.gotoView(addressUrl)"></uni-icons> -->
					<uni-icons type="gift" size="20" class="icon" color="#000" @click="$commonFunc.gotoView(orderUrl)">
					</uni-icons>
				</view>
			</block>
		</uni-nav-bar>
		<uni-fab 
		    style="z-index: 1000;"
			ref="fab" :pattern="pattern" :content="content" horizontal="right" vertical="bottom"
			direction="vertical" @trigger="trigger" @fabClick="fabClick" />
		<waterFall v-if="dataList.length > 0" :list="dataList"></waterFall>
	</view>
</template>

<script>
	import waterFall from '../../components/waterFall/index.vue';
	import {getGoods} from "../../api/good.js"
	export default {
		components: {
			waterFall
		},
		data() {
			return {
				searchParams:{
					current:1,
					size:8,
					gname:"",
					status:1,
					gid:'',
					cid:'',
					total:0
				},
				addressUrl: '/shoopping/address/address',
				cartUrl: '/shopping/cart/cart',
				orderUrl: '/shopping/order/order',
				dataList: [],
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#000',
					buttonColor: '#fff',
					iconColor: '#aaa'
				},
				content: [{
						iconPath: '../../static/cart.png',
						selectedIconPath: '../../static/cart-fill.png',
						text: '购物车',
						active: false,
						url:'/shopping/cart/cart'
					},
					{
						iconPath: '../../static/order.png',
						selectedIconPath: '../../static/order-fill.png',
						text: '订单',
						active: false,
						url:'/shopping/order/order'
					},
					{
						iconPath: '../../static/address.png',
						selectedIconPath: '../../static/address-fill.png',
						text: '地址',
						active: false,
						url:'/shopping/address/address'
					}
				]
			}
		},
		created(){
			this.search()
		},
		onReachBottom() {
			if (this.dataList.length < this.searchParams.total) {
				this.searchParams.current++;
				this.search();
			}
		},
		onPullDownRefresh() {
			this.searchParams.current= 1;
			this.searchParams.size=8;
			this.dataList=[];
			this.search();
			uni.stopPullDownRefresh();
		},
		methods: {
			trigger(e) {
				this.content[e.index].active = !e.item.active
				this.$commonFunc.gotoView(this.content[e.index].url)
			},
			fabClick() {
				
			},
			search(){
				getGoods(this.searchParams).then(res=>{
					if(res.code==200){
						this.searchParams.total = res.data.total;
						this.searchParams.current = res.data.current;
						this.dataList = [...this.dataList, ...res.data.records]
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	$nav-height: 30px;

	.input-view {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		// width: 350rpx;
		flex: 1;
		background-color: #f8f8f8;
		height: $nav-height;
		border-radius: 30rpx;
		padding: 0 40rpx;
		flex-wrap: nowrap;
		margin: 14rpx 0;
		line-height: $nav-height;
	}

	.input-uni-icon {
		line-height: $nav-height;
	}

	.nav-bar-input {
		caret-color: #FF7F00;
		height: $nav-height;
		line-height: $nav-height;
		/* #ifdef APP-PLUS */
		width: 300rpx;
		/* #endif */
		padding: 0 12rpx;
		font-size: 28rpx;
		background-color: #f8f8f8;
	}

	.icons {
		font-size: 30rpx;
		color: #999;
		padding-right: 30rpx;

		.icon {
			padding-left: 20rpx;
		}
	}
</style>
